/**
 * 整改反馈单列表
 */
<template>
  <vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="keyword">
							<template #label><vp-label zh="关键字" en="Keyword"/></template>
							<el-input v-model="searchForm.keyword" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bmidList">
							<template #label><vp-label zh="责任部门" en="Resp. Dept."/></template>
							<DepartmentMultSelectTree  :treeDefaultChecked="searchForm.treeDefaultChecked"
									:selectedText="searchForm.departmentDesc" @treeSelected="handleDepartmentSelected"
									class="w100"></DepartmentMultSelectTree>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jcrq">
							<template #label><vp-label zh="检查日期" en="Insp. Date"/></template>
							<el-date-picker
								v-model="searchForm.jcrq"
								type="daterange"
								start-placeholder="开始日期/Start Date"
								end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-"
								class="w100"
							>
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bh">
							<template #label><vp-label zh="问题编号" en="Problem No." /></template>
							<el-input v-model="searchForm.bh" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="wtfjList">
							<template #label><vp-label zh="问题分级" en="Problem Rating"/></template>
							<DictMulitSelect 
								:lxid='2005'
								:selectedId="searchForm.wtfjList"
								@dictMulitSelected='(data: any) => {searchForm.wtfjList = data}'
								class="w100"
							/>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="zgxzList">
							<template #label><vp-label zh="整改性质" en="Nature"/></template>
							<DictMulitSelect 
								:lxid='2007'
								:selectedId='searchForm.zgxzList'
								@dictMulitSelected='(data: any) => {searchForm.zgxzList = data}'
								class="w100"
							/>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="ztList">
							<template #label><vp-label zh="状态" en="Status"/></template>
							<VpStatusMultSelect v-model="searchForm.ztList" />
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-if="jb == 20" v-auth="'qualityAuditOrgRectification.add'" @click="handleAdd"/>
			<vp-btn-add v-if="jb == 10" v-auth="'qualityAuditDeptRectification.add'" @click="handleAdd"/>
			<vp-btn-export @click="handleExport"/>
		</template>
		<template #table>
			<vp-vxe-table :id="`${props.jb === 10 ? 'qualityAuditDeptRectificationTable' : 'qualityAuditOrgRectificationTable'}`" ref="tableRef" v-loading="loading" :data="tableData" @sort-change="handleSortChange" row-key="id">	
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column sortable field="bh" show-overflow  :width="jb == 10 ? 180 : 140" title="问题编号 Problem No.">
					<template #header><vp-label zh="问题编号" en="Problem No."/></template>
				</vxe-column>
				<vxe-column sortable field="jcrq" show-overflow  width="110" title="检查日期 Insp. Date">
					<template #header><vp-label zh="检查日期" en="Insp. Date"/></template>
				</vxe-column>
				<vxe-column sortable field="jcdw" show-overflow  width="110" title="检查单位 Insp. Unit">
					<template #header><vp-label zh="检查单位" en="Insp. Unit"/></template>
				</vxe-column>
				<vxe-column sortable field="jcry" show-overflow  width="130" title="检查人员 Insp. Person">
					<template #header><vp-label zh="检查人员" en="Insp. Person"/></template>
				</vxe-column>
				<vxe-column sortable field="jcdd" show-overflow  width="150" title="检查地点 Insp. Location">
					<template #header><vp-label zh="检查地点" en="Insp. Location"/></template>
				</vxe-column>
				<vxe-column sortable field="wtfj" show-overflow  width="140" title="问题分级 Problem Rating">
					<template #header><vp-label zh="问题分级" en="Problem Rating"/></template>
					<template #default="scope">
						<el-tag v-if="scope.row.wtfj === 'H'" type="danger" effect="dark" style="width: 80px;">H</el-tag>
						<el-tag v-else-if="scope.row.wtfj === 'M'" type="warning" effect="dark" style="width: 80px;">M</el-tag>
						<el-tag v-else-if="scope.row.wtfj === 'L'" type="primary" effect="dark" style="width: 80px;">L</el-tag>
						<span v-else>{{ scope.row.wtfj }}</span>
					</template>
				</vxe-column>
				<vxe-column sortable field="wtms" show-overflow  width="180" title="问题描述 Problem Desc.">
					<template #header><vp-label zh="问题描述" en="Problem Desc."/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.wtms)"/>
					</template>
				</vxe-column>
				<vxe-column sortable field="zrbm" show-overflow  width="120" title="责任部门 Resp. Dept.">
					<template #header><vp-label zh="责任部门" en="Resp. Dept."/></template>
				</vxe-column>
				<vxe-column sortable field="zjyyfx" show-overflow  width="180" title="直接原因分析 Direct Cause Analysis">
					<template #header><vp-label zh="直接原因分析" en="Direct Cause Analysis"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.zjyyfx)"/>
					</template>
				</vxe-column>
				<vxe-column sortable field="hffhxcs" show-overflow  width="180" title="恢复符合性措施 Restoration Measures">
					<template #header><vp-label zh="恢复符合性措施" en="Restoration Measures"/></template>
				</vxe-column>
				<vxe-column sortable field="zgxz" show-overflow  width="110" title="整改性质 Nature">
					<template #header><vp-label zh="整改性质" en="Nature"/></template>
				</vxe-column>
				<vxe-column sortable field="zgwcqx" show-overflow  width="140" title="整改完成期限 Rect. Deadline">
					<template #header><vp-label zh="整改完成期限" en="Rect. Deadline"/></template>
				</vxe-column>
				<vxe-column sortable field="zt1" show-overflow  width="110" title="状态 Status">
					<template #header><vp-label zh="状态" en="Status"/></template>
					<template #default="scope">
						{{scope.row.zt == 89 ? '已完成 Finished' : '未完成 Unfinished' }}
					</template>
				</vxe-column>
				<vxe-column sortable field="zt2" show-overflow  width="110" title="状态 Status">
					<template #header><vp-label zh="状态" en="Status"/></template>
					<template #default="scope">
						{{ getStatusDesc(scope.row.zt) }}
					</template>
				</vxe-column>
				<vxe-column sortable field="glyh" show-overflow  width="110" title="关联隐患 Hazard">
					<template #header><vp-label zh="关联隐患" en="Hazard"/></template>
					<template #default="scope">
						<el-link type="info" class="foc-link" :underline="false"  @click="handleViewYh(scope.row)">{{ scope.row.glyh}}</el-link>
					</template>
				</vxe-column>
				<vxe-column sortable field="glwxy" show-overflow  width="140" title="关联危险源 Related Hazard">
					<template #header><vp-label zh="关联危险源" en="Related Hazard"/></template>
					<template #default="scope">
						<el-link type="info" class="foc-link" :underline="false"  @click="handleViewWxy(scope.row)">{{ scope.row.glwxy}}</el-link>
					</template>
				</vxe-column>
				<vxe-column fixed="right" width="220" field="operation" title="操作 Operations">
					<template #header><vp-label-operations/></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit v-if="scope.row.zt == 10 && jb == 10" text v-auth="'qualityAuditDeptRectification.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn-copy v-if="jb == 10" text v-auth="'qualityAuditDeptRectification.add'" @click="handleCopy(scope.row)"/>
							<vp-btn-del v-if="scope.row.zt == 10 && jb == 10" text v-auth="'qualityAuditDeptRectification.delete'" @click="handleDelete(scope.row)"/>
							<vp-btn-discard v-if="(scope.row.zt === 88 || scope.row.zt === 89) && jb == 10" text v-auth="'qualityAuditDeptRectification.discard'" @click="handleCancle(scope.row)"/>
							<vp-btn-edit v-if="scope.row.zt == 10 && jb == 20" text v-auth="'qualityAuditOrgRectification.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn-copy v-if="jb == 20" text v-auth="'qualityAuditOrgRectification.add'" @click="handleCopy(scope.row)"/>
							<vp-btn-del v-if="scope.row.zt == 10 && jb == 20" text v-auth="'qualityAuditOrgRectification.delete'" @click="handleDelete(scope.row)"/>
							<vp-btn-discard v-if="(scope.row.zt === 88 || scope.row.zt === 89) && jb == 20" text v-auth="'qualityAuditOrgRectification.discard'" @click="handleCancle(scope.row)"/>
							<vp-btn-print text @click="handlePrint(scope.row)"/>
							<vp-btn-view text @click="handleView(scope.row)"/>
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
		<EditDeptRectification ref="editDialogRef" @formSubmited="handleFormSubmited"></EditDeptRectification>
	</vp-main-page>
</template>

<script setup lang="ts" name="rectificationCommon">
import { ref, reactive, onMounted } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';
import EditDeptRectification from "./component/EditDeptRectification.vue";
import DepartmentMultSelectTree from '/@/components/vp/department/VpDepartmentMultSelectTree.vue';
import router from '/@/router';
import DictMulitSelect from "/@/components/vp/dict/VpDictSelectMulit.vue";
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import commonFunction from '/@/utils/commonFunction';
import VpStatusMultSelect from "/@/components/vp/status/VpStatusMultSelect.vue";

const searchForm = reactive({
	keyword: "",
	ztList: [10,88,89],
	jcrq:[],
	bh: "",
	zgxzList: [],
	wtfjList: [],
	bmidList: [] as string[],
	departmentDesc: '',
	treeDefaultChecked: [],
	jb: 10, // 级别 10部门 20公司
	sygn: 31,
});

const props = defineProps({
	jb: {
		type: Number,
	},
	sygn: {
		type: Number,
	},
	type: {
		type: String,
	},
});

const page = reactive({
	...DEFAULT_PAGE,
})

const tableRef = ref();
const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/safe/deptRectification/list', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data?.list || []
		page.total = res?.data?.total || 0
		page.pageNum = res?.data?.pageNum || 1
	}).finally(()=>{
		loading.value = false
	})
}

const searchFormRef = ref();

// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
	searchForm.bmidList = [];
	searchForm.departmentDesc = '';
	searchForm.treeDefaultChecked = [];
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

onMounted(() => {
	if(props.jb){
		searchForm.jb = props.jb;
	}
	if(props.sygn){
		searchForm.sygn = props.sygn;
	}
	loadDataList();
});

const editDialogRef = ref();

const handleAdd = ()=>{
	editDialogRef.value.handleOpen('add','', props.jb || 10);
};
const handleView = (row:any)=>{
	router.push({
		name: 'viewRectification',
		params: {
			id: row.id,
		},
	});
}
const handleViewWxy = (row:any)=>{
	router.push({
		name: 'viewDangerousSrc',
		params: {
			id: row.glwxyid,
			},
	});
}
const handleViewYh = (row:any)=>{
	router.push({
			name: "viewHiddenTrouble",
			params: {
			id: row.glyhid,
		},
	});
}
const handleEdit = (row: any)=>{
	editDialogRef.value.handleOpen('edit', row.id, row.jb);
}

const handleCopy = (row: any)=>{
	editDialogRef.value.handleOpen('copy', row.id, row.jb);
}

// 删除
const handleDelete = (row: any)=>{
	VpMessageBox.confirmDelete().then(()=>{
		loading.value = true;
		request.delete(`/safe/deptRectification/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}

// 终止
const handleCancle = (row: any)=>{
	VpMessageBox.confirmDelete().then(()=>{
		loading.value = true;
		request.post(`/safe/deptRectification/cancle/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}

// 表单完成后回调事件
const handleFormSubmited = () => {
	loadDataList();
}

const handleDepartmentSelected = (list: any) => {
	let bmidList = [] as string[];
	list.forEach((obj: any) => {
		bmidList.push(obj.id);
	});
	searchForm.bmidList = bmidList;
	searchForm.departmentDesc = list.map((obj: any) => {
		return obj.label;
	}).join(", ");
}

const {exportFile, printFile, getStatusDesc} = commonFunction();

const handleExport = () =>{
	if(!props.jb){
		return;
	}
	exportFile({
		url: `/safe/deptRectification/export`,
		params: searchForm,
		fileName: props.jb == 10 ? '部门级整改反馈单.xlsx' : props.jb == 20 ? '公司级整改反馈单.xlsx' : "整改反馈单",
	});
}
const handlePrint = (row: any) =>{
	printFile({
		url: `/safe/deptRectification/print/${row.id}`
	});
}

</script>
<style lang="scss" scoped>
</style>
